<template>
  <div>
    <el-table
      :data="list.slice((currpage - 1) * pagesize, currpage * pagesize)"
      style="width: 100%"
    >
      <el-table-column type="expand">
          <template slot-scope="props">
            <el-form leael-position="left" class="demo-table-expand">
                <el-form-item label="店铺名称">
                    <span>{{props.row.name}}</span>
                </el-form-item>
                <el-form-item label="所属店铺">
                    <span>{{props.row.address}}</span>
                </el-form-item>
                 <el-form-item label="商品 ID">
                    <span>{{props.row.id}}</span>
                </el-form-item>
                 <el-form-item label="商品分类">
                    <span>{{props.row.category}}</span>
                </el-form-item>
                 <el-form-item label="店铺地址">
                    <span>{{props.row.addres}}</span>
                </el-form-item>
                 <el-form-item label="商品描述">
                    <span>{{props.row.category}}</span>
                </el-form-item>
            </el-form>              
          </template>
           </el-table-column>
           <el-table-column label="店铺名称" prop="name"></el-table-column>
           <el-table-column label="店铺地址" prop="address"></el-table-column>
           <el-table-column label="店铺介绍" prop="category"></el-table-column>
           <el-table-column label="操作">
               <el-button>编辑</el-button>
               <el-button>添加食品</el-button>
               <el-button type="danger">删除按钮</el-button>
           </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
    name:"",
    data() {
        return {
            list:[],
            pagesize:5,
            currpage:1
        }
    },
    created(){
        this.$axios.get("shopList.json").then(res=>{
            this.list=res.data
        })
    },
    methods: {
        handleChange(val){
            this.pagesize = val
        },
        handleChange(val){
            this.currpage = val
        },
    },
}
</script>